<template>
  <div>
    <el-card class="box-card">
      <!--      <el-button-->
      <!--        class="btn-add"-->
      <!--        @click="handleUpdateProduct()"-->
      <!--        size="mini">-->
      <!--        添加-->
      <!--      </el-button>-->
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="input"
        clearable
        size="mini">
      </el-input>
      <el-button
        class="btn-add"
        @click="quzzyQuery()"
        size="mini">
        查询
      </el-button>
    </el-card>

    <el-table ref="productTable"
              style="width: 100%"
              :data="productList"
              border>
      <!--      <el-table-column type="selection" width="60" align="center"></el-table-column>-->
      <!--      <el-table-column-->
      <!--        type="index">-->
      <!--      </el-table-column>-->
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <p>
            <el-button
              size="mini"
              @click="orderLook(scope.$index, scope.row)">查看
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="评论编号" width="100" prop="commentId" align="center">
      </el-table-column>
      <el-table-column label="评论状态" width="110" prop="commentStatus" align="center"
                       :filters="[{text: '正常', value: '1'}, {text: '已删除', value: '0'}]"
                       :filter-method="filterHandler">
        <template slot-scope="scope">
          <el-tag
            v-show="scope.row.commentStatus==-1"
            type="danger"
            disable-transitions>已删除</el-tag>
          <el-tag
            v-show="scope.row.commentStatus==0"
            type="success"
            disable-transitions>正常</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="用户编号" width="100" prop="userId" align="center">
      </el-table-column>
      <el-table-column label="店铺编号" width="100" prop="merchantId" align="center">
      </el-table-column>
      <el-table-column label="商品编号" width="100" prop="spuId" align="center">
      </el-table-column>
      <el-table-column label="评论内容" width="100" prop="commentContent" align="center">
      </el-table-column>
      <el-table-column label="用户名称" width="100" prop="userName" align="center">
      </el-table-column>
      <el-table-column label="用户手机号" width="130" prop="userPhotoNumber" align="center">
      </el-table-column>
      <el-table-column
        prop="userPhoto"
        label="用户头像" width="150" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.userPhoto" width="100" height="50px">
        </template>
      </el-table-column>
      <el-table-column
        prop="spuBigimg"
        label="商品图片" width="150" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.spuBigimg" width="100" height="50px">
        </template>
      </el-table-column>

      <el-table-column sortable label="评论时间" width="110" :formatter="dateFormatter" prop="commentTime" align="center">
      </el-table-column>

      <el-table-column label="商品评分" width="100" prop="spuGrade" align="center">
      </el-table-column>
      <el-table-column label="店铺服务评分" width="130" prop="merchantServeCrade" align="center">
      </el-table-column>

    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.page.currentPage"
      layout="total, prev, pager, next, jumper"
      :total="this.page.total">
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="33%">
      <el-form ref="productAttrCatForm" :model="this.Form" :rules="rules" label-width="120px">
        <el-form-item label="评论状态" prop="commentStatus"  >
          <!--          <el-input v-model="Form.orderStatusName" auto-complete="off" ></el-input>-->
          <el-select v-model="value" placeholder="请选择" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="statusChange(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评论内容" prop="commentContent" >
          <el-input v-model="Form.commentContent" auto-complete="off" ></el-input>
        </el-form-item>

        <el-form-item label="商品评分" prop="spuGrade" >
          <el-input v-model="Form.spuGrade" auto-complete="off"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺服务评分" prop="merchantServeCrade" >
          <el-input v-model="Form.merchantServeCrade" auto-complete="off"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="评论编号" prop="commentId" >
          <el-input v-model="Form.commentId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="userId" >
          <el-input v-model="Form.userId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺编号" prop="merchantId" >
          <el-input v-model="Form.merchantId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="spuId" >
          <el-input v-model="Form.spuId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName" >
          <el-input v-model="Form.userName" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhotoNumber" >
          <el-input v-model="Form.userPhotoNumber" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="userPhoto"  >
          <el-image
            style="width: 100px; height: 100px"
            :src="Form.userPhoto"
            :preview-src-list="srcList2"
          >
          </el-image>
        </el-form-item>
        <el-form-item label="商品图片" prop="spuBigimg"  >
          <el-image
            style="width: 100px; height: 100px"
            :src="Form.spuBigimg"
            :preview-src-list="srcList"
          >
          </el-image>
        </el-form-item>

        <el-form-item label="评论时间" prop="commentTime" >
          <el-input v-model="Form.commentTime" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(Form)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="lookOrderTitle"
      :visible.sync="lookOrderVisible"
      width="33%">
      <el-form ref="lookForm" :model="this.lookOrderData"  label-width="120px">

        <el-form-item label="评论状态" prop="commentStatus"  >
          <el-input v-model="lookOrderData.commentStatus" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="评论内容" prop="commentContent" >
          <el-input v-model="lookOrderData.commentContent" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品评分" prop="spuGrade" >
          <el-input v-model="lookOrderData.spuGrade" auto-complete="off"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺服务评分" prop="merchantServeCrade" >
          <el-input v-model="lookOrderData.merchantServeCrade" auto-complete="off"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="评论编号" prop="commentId" >
          <el-input v-model="lookOrderData.commentId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="userId" >
          <el-input v-model="lookOrderData.userId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺编号" prop="merchantId" >
          <el-input v-model="lookOrderData.merchantId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="spuId" >
          <el-input v-model="lookOrderData.spuId" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName" >
          <el-input v-model="lookOrderData.userName" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhotoNumber" >
          <el-input v-model="lookOrderData.userPhotoNumber" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="userPhoto"  >
          <el-image
            style="width: 100px; height: 100px"
            :src="lookOrderData.userPhoto"
            :preview-src-list="srcList2"
          >
          </el-image>
        </el-form-item>
        <el-form-item label="商品图片" prop="spuBigimg"  >
          <el-image
            style="width: 100px; height: 100px"
            :src="lookOrderData.spuBigimg"
            :preview-src-list="srcList"
          >
          </el-image>
        </el-form-item>

        <el-form-item label="评论时间" prop="commentTime" >
          <el-input v-model="lookOrderData.commentTime" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
    import moment from 'moment'
    import axios from "axios"
    import Cookie from "js-cookie"
    export default {
        name: "kindsList",
        data() {
            return {
                input:"",
                productList: [],
                kindStatus: false,
                dialogTitle: "",
                lookOrderTitle:"",
                lookOrderVisible:false,
                lookOrderData:{},
                srcList: [],
                srcList2: [],
                dialogVisible: false,
                userId: "1",
                mo:false,
                Form: {orderStatus:1},
                page: {
                    currentPage:1,
                    total: 0,
                    page: 0,
                    rows: 10,
                },
                rules: {
                    addresseee: [
                        {required: true, message: '请输入收件人', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入收件人电话', trigger: 'blur'}
                    ],
                    shippingAddress: [
                        {required: true, message: '请输入收件人地址', trigger: 'blur'}
                    ]
                },
                options: [{
                    value: '-1',
                    label: '已删除'
                }, {
                    value: '0',
                    label: '正常'
                }],
                value: ''
            }
        },
        created() {
            // let listdata = this.$route.params.item;
            // if (listdata != null) {
            //     this.userId = listdata;
            // }
            // console.log(listdata)
            let merchant = Cookie.get("merchant");
            let information = JSON.parse(merchant);
            console.log(information);
            this.userId=information.merchantId;
            this.getList();
        },
        methods: {
            statusChange(value){
                console.log(value)
                this.Form.commentStatus=value;
            },
            filterHandler (value, row, column) {
                const property = column["property"]
                return row[property] === value
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.rows = size;
                console.log(this.page.rows)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.page.currentPage = currentPage;
                this.page.page=(currentPage*this.page.rows)-this.page.rows
                if(this.mo==true){
                    this.quzzyQuery()
                }else{
                    this.getList();
                }
                console.log(this.page.currentPage)  //点击第几页
            },
            quzzyQuery() {
                this.mo=true
                axios.get("http://localhost:8201/comment/moMerchantFindAll", {
                    params: {
                        value: this.input,
                        commentStatus:0,
                        merchantId: this.userId,
                        page: this.page.page,
                        rows: this.page.rows
                    }
                }).then(data => {
                    console.log(data)
                    if (data.data.list == null || data.data.list == "") {
                        this.$message({
                            message: '未查询到有关数据'
                        });
                        this.mo=false;
                        this.getList();
                    } else {
                        this.productList = data.data.list;
                        this.page.total = data.data.total;
                    }
                });
            },
            handleConfirm(kindsForm) {
                //表单校验
                this.$refs["productAttrCatForm"].validate((tt=>{
                    console.log(tt)
                    if (!tt) return;

                    if (this.dialogTitle == "添加") {
                        console.log(kindsForm)
                        this.$axios({
                            method: 'post',
                            url: 'http://localhost:8001/foot/mySave',
                            data: kindsForm,
                        }).then(result => {
                            console.log(result)
                            if (result.data) {
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '填写错误或已存在',
                                    type: 'error'
                                });
                            }
                            this.Form = {};
                            this.dialogVisible = false;
                            this.getList();
                        })
                    } else if (this.dialogTitle == "编辑") {
                        console.log(this.Form)
                        this.$axios({
                            method: 'put',
                            url: 'http://localhost:8201/comment',
                            data: this.Form,
                        }).then(result => {
                            if (result.data!="") {
                                this.$message({
                                    showClose: true,
                                    message: '成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '填写错误或已存在',
                                    type: 'error'
                                });
                            }

                            this.Form = {};
                            this.dialogVisible = false;
                            this.getList();
                        })
                    }

                }))

            },
            dateFormatter(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return ''
                }
                ;
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            },
            getAttrList(index, row) {
                this.$router.push({path: '/attr/spuAttrList', query: {kindsId: row.kindsId}})
            },
            getList() {
                axios.get("http://localhost:8201/comment/merchantFindAll", {
                    params: {
                        commentStatus:0,
                        merchantId: this.userId,
                        page: this.page.page,
                        rows: this.page.rows
                    }
                }).then(result => {
                    console.log(result)
                    this.productList = result.data.list;
                    this.page.total = result.data.total;
                })
            },
            /*删除*/
            handleDelete(index, row) {
                // var kindStatus=row.homeStatus==1?1:0;
                var bean = {
                    id: row.collectId,
                    spuId: row.spuId,
                    userId: row.userId, collectStatus: 0
                }
                // console.log(kindStatus)
                this.$axios({
                    method: 'delete',
                    url: 'http://localhost:8001/foot/mydelete',
                    data: bean
                }).then(result => {
                    this.getList();
                })
            },
            /*查看单条*/
            orderLook(index, row) {
                this.lookOrderVisible=true;
                this.srcList[0]=row.spuBigimg;
                this.srcList2[0]=row.userPhoto;
                console.log("handleShowKinds", row);

                let _obj = JSON.stringify(row)
                this.lookOrderData=JSON.parse(_obj);
                console.log( this.lookOrderData)
                if(row.commentStatus==-1){
                    this.lookOrderData.commentStatus="已删除";
                }else{
                    this.lookOrderData.commentStatus="正常"
                }
            },

        }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
